<template>
  <div class="advertisement">
    <commonHeader :title="title" @goBack="goBack"></commonHeader>
    <!--      内容-->
    <div class="content">
      <!--        直播推荐-->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <div
          class="liveVideo"
          v-for="(item, index) in list"
          :key="index"
          @click="gocontent(item.type, item.target_id)"
        >
          <div class="bgPic">
            <img :src="item.cover" />
            <div class="title">{{item.type_name }}</div>
          </div>
          <div class="describe">
            <h3>{{ item.title }}</h3>
            <p>主播 : {{ item.name }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </div>
        </van-list>
      </van-pull-refresh>
      
    </div>

    <!--        <h1>这是广告页面</h1><br/>-->
    <!--        <button @click="gopersonal">进入个人主页</button><br/>-->
    <!--        <button @click="gochatroom">进入直播间</button>-->
    <!--        <button @click="golink">跳链接</button>-->
  </div>
</template>
<script>
import commonHeader from "../components/common/commonHeader";
import { ADVLIST } from "@/apis/mine";
export default {
  name: "advertisement",
  components: {
    commonHeader
  },
  data() {
    return {
      title: "今日推荐",
      list: [],
      refreshing:false,
      finished:false,
      loading:false,
      limit:10,
      page:1,
      total:0
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    // 返回
    goBack() {
      if (window.history.length > 1) {
        window.history.go(-1);
      } else {
        if (this.$systemInfo() === "android") {
          window.android.closeCurrentPage();
        } else if (this.$systemInfo() === "ios") {
          window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
        }
      }
    },
     //跳广告详情
    gocontent(type,targtid) {
      // alert(type);
      if (type === "webcast") {
        this.gochatroom(targtid);
      } 
      else if (type === "user") {
        this.gopersonal(targtid);
      } 
      else {
        if (targtid.indexOf("hongjitimes.com")!=-1 && targtid.indexOf("https")!=-1) 
        {
          window.location.href = targtid;
        } 
        else
        {
          this.gopersonal("1593495659300");
        }
      }
    },
    // 进入个人主页
    gopersonal(userid) {
      var that = this;
      let user_id = userid;
      console.log(user_id);
      if (that.$systemInfo() === "android") {
        window.android.toUserHomePage(user_id);
      } else if (that.$systemInfo() === "ios") {
        window.webkit.messageHandlers.toUserHomePage.postMessage(user_id);
      }
    },
    // 进入直播间
    gochatroom(roomid) {
      var that = this;
      let type = 1;
      let room_id = roomid;
      if (that.$systemInfo() === "android") {
        window.android.joinRoom(type, room_id);
      } else if (that.$systemInfo() === "ios") {
        var data = {
          type: 1,
          room_id: roomid
        };
        window.webkit.messageHandlers.joinRoom.postMessage(
          JSON.stringify(data)
        );
      }
    },
    // 跳链接
    golink() {
      window.location.href =
        "https://fme.hongjitimes.com/shareVideo?video_id=91280df875cb42c7a3c57ee1779ec29a";
    },
    //获取列表
    getlist(){
      let adlist = ADVLIST;
      let that = this;
      var data={
        page:that.page,
        limit:that.limit
      }
      adlist(data).then(res => {
        if (res.data.code === 200) {
          that.total= res.data.data.total;
          if (this.refreshing) {
              this.list = [];
              this.refreshing = false;
            }
          that.loading=false;
          if(res.data.data.data.length<this.limit)
          {
            that.finished=true
          }
          that.list =  that.list.concat(res.data.data.data);
        }
      });
    },
    onLoad(){
      this.page++;
      this.getlist();
    },
    onRefresh(){
        // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.page=1;
      this.getlist();
    }
   
  }
};
</script>
<style lang="less" scoped>
@import (reference) url(../assets/less/common);
.advertisement {
  width: 100%;
  .content {
    width: 100%;
    padding: 1.7rem 0.3rem 0.3rem 0.3rem;
    box-sizing: border-box;
    .liveVideo {
      margin-bottom: 0.3rem;
     
      .bgPic {
        width: 100%;
        height: 3.5rem;
        // background-image: url(http://job.dayinyun.com/liveVideoBg.png);
        // background-size: 100% 100%;
        // background-repeat: no-repeat;
        // padding:0.22rem 0.36rem;
        box-sizing: border-box;
        position: relative;
        img {
          width: 100%;
          height: 3.5rem;
          object-fit: cover;
           border-top-left-radius: 0.1rem;
           border-top-right-radius: 0.1rem;
        }
        .title {
          position: absolute;
          top: 0.2rem;
          left: 0.2rem;
          width: 1.7rem;
          height: 0.52rem;
          background: #000000;
          opacity: 0.7;
          border-radius: 0.05rem;
          font-size: @fontSize34;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .describe {
        width: 100%;
        padding: 0.13rem 0.2rem;
        box-sizing: border-box;
        background: #232323;
        border-bottom-left-radius: 0.1rem;
        border-bottom-right-radius: 0.1rem;
        h3 {
          font-size: @fontSize30;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color: #ffffff;
          line-height: 0.5rem;
        }
        p {
          font-size: @fontSize30;
          font-family: @fontFamily400;
          font-weight: @fontWeight400;
          color: #cccccc;
          line-height: 0.5rem;
        }
      }
    }
  }
}
h1 {
  color: #ffffff;
}
button {
  display: block;
  margin-top: 0.3rem;
  width: 2rem;
  height: 1rem;
  background: crimson;
  color: #ffffff;
  text-align: center;
  line-height: 0.5rem;
}
</style>
